<template>
    <div>
        <van-popup v-model="showReadme" :close-on-click-overlay="false" safe-area-inset-bottom
                   :style="{ width: '80%', position: 'fixed', top: '50%', borderRadius: '10px' }">
            <div class="readme-popup">
                <div class="readme-popup-title">维护提示</div>
                <div class="readme-popup-content">
                    <p><span class="tips">盛事通“健康通行码”</span>需对代办功能进行升级。
                    升级后老人、少儿等没有条件申办“健康通行码”的人员，由直系亲属或监护人代办；每人仅可为3名老人或少儿代办申领。
                    升级后对代办人员信息填写有误的将不予赋码。升级后修改、删除代办人员信息需联系客服。</p>
                    <p><span class="tips">此次升级期间将关闭“健康通行码”的代办功能</span>，但不影响健康码的正常使用。
                        4月20日20点至23日24点盛事通“健康通行码”代办功能进行升级。</p>
                </div>
                <div class="readme-popup-btn">
                    <van-button block type="info"
                                native-type="button"
                                size="small"
                                class="readme-popup-btn-sm"
                                @click="choose">
                        确定
                    </van-button>
                </div>
            </div>
        </van-popup>

    </div>
</template>

<script>
export default {
  name: 'TipsInfo',
  data () {
    return {
      showReadme: false
    }
  },
  methods: {
    choose () {
      this.showReadme = false
    }
  },
  mounted () {
    if (this.allShow) {
      this.showReadme = true
    }
    if (window.localStorage.getItem('keyType1') != '2') {
      this.showReadme = true
      window.localStorage.setItem('keyType1', '2')
    }
  },
  props: {
    allShow: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    info: {
      type: String,
      default: () => {
        return ''
      }
    }
  }
}
</script>

<style scoped>
    .tips{
        color: red;
        font-weight: bold;
    }
    .readme-popup {
        padding: 25px;
    }

    .readme-popup .readme-popup-title {
        text-align: center;
        color: red;
        font-weight: bold;
        text-decoration: underline;
    }

    .readme-popup p {
        margin: 5px 0 5px 0;
        font-size: 12px;
        text-indent: 25px
    }

    .readme-popup-btn {
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }

    .readme-popup-btn-sm {
        width: 45%;
    }

</style>
